<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="imagetoolbar" content="no" />
    <title>HoverAccordion jQuery Plugin</title>
    <meta name="Keywords" content="Bernd Matzner, jQuery, Plugin, Hover, Accordion" />
    <style media="screen" type="text/css">
        /* General Styles */
        * {
            margin:0;
            padding:0;
            border:0px none #FFFFFF;
        }

        * html ul ul li {
            margin-bottom:-1px;
        }

        * html ul ul li a, * html ul li a {
            height:100%;
        }

        a {
            color:#FFFFFF;
            text-decoration:underline;
        }

        body {
           
            
            color:#F0F0F0;
            font-family:'Lucida Grande','Segoe UI',Arial,Helvetica,sans-serif;
            font-size:85%;
            line-height:140%;
        }

  

        h1 {
            margin:1em 0 0.5em 0;
            display:block;
            font-weight:normal;
        }

        h2 {
            border-top:1px solid #F0F0F0;
            padding-top:0.5em;
            margin:1em 0 1em 0;
            display:block;
            font-weight:normal;
        }

       

        /* Styles for Example #1 */
        #example1 {
            margin:0;
            padding:0;
            width:200px;
            list-style-type:none;
            line-height:120%;
        }

        #example1 .closed {
            background-image:url(ha-down.gif);
        }

        #example1 .closed, #example1 .opened {
            padding-right:10px;
            background-position:98% 50%;
            background-repeat:no-repeat;
        }

        #example1 .header {
            background-color:#7B7B7B;
        }

        #example1 .opened {
            background-image:url(ha-up.gif);
        }

        #example1 a {
            display:block;
            font-weight:bold;
            text-decoration:none;
        }

        #example1 a.hover {
            border-top:1px solid #5F5F5F;
            border-bottom:1px solid #7B7B7B;
            background-color:#7B7B7B;
            color:#FFFFFF;
        }

        #example1 ul {
            overflow: hidden;
            margin:0;
            padding:0;
        }

        #example1 li {
            margin:0;
            padding:0;
            list-style-type:none;
            background-color:#848484;
            color:#FFFFFF;
        }

        #example1 li a {
            padding:2px 10px 2px 4px;
            border-top:1px solid #9A9A9A;
            border-left:1px solid #9A9A9A;
            border-right:1px solid #696969;
            border-bottom:1px solid #757575;
            background-color:#848484;
            color:#FFFFFF;
        }

        #example1 li.active a, #example1 li li.active a {
            border-top:1px solid #5F5F5F;
            border-bottom:1px solid #7B7B7B;
            border-left:1px solid #757575;
            border-right:1px solid #9A9A9A;
            background-color:#404040;
            color:#FFFFFF;
        }

        #example1 li.active li a, #example1 li li a {
            padding:2px 4px 2px 8px;
            border-top:1px solid #696969;
            border-left:1px solid #696969;
            border-right:1px solid #8A8A8A;
            border-bottom:1px solid #7B7B7B;
            background-color:#757575;
            color:#FFFFFF;
        }

        /* Styles for Example #2 */
        
    </style>
    <script type="text/javascript" src="jquery.min.js">
    </script>
    <script type="text/javascript" src="jquery.hoveraccordion.min.js">
    </script>
    <script type="text/javascript">
        $(document).ready( function() {
            // Setup HoverAccordion for Example 1
            $('#example1').hoverAccordion({onClickOnly:true,keepHeight:true});

            // Setup HoverAccordion for Example 2 with some custom options
            $('#example2').hoverAccordion({
                keepHeight:true,
                activateItem: 3,
                speed: 400
            });
            $('#example2').children('li:first').addClass('firstitem');
            $('#example2').children('li:last').addClass('lastitem');
        });
    </script>
</head>
<body>
    <div id="content">
        <h1>HoverAccordion</h1>
        
        <a name="ex1" id="ex1"></a>
        <ul id="example1">
            <li>
                <a href="#">Item 1</a>
            </li>
            <li>
                <a href="#">Item 2</a>
                <ul>
                    <li>
                        <a href="index.php?id=2a#ex1">Subitem 2a</a>
                    </li>
                    <li>
                        <a href="index.php?id=2b#ex1">Subitem 2b</a>
                    </li>
                    <li>
                        <a href="index.php?id=2c#ex1">Subitem 2c</a>
                    </li>
                    <li>
                        <a href="index.php?id=2d#ex1">Subitem 2d</a>
                    </li>
                    <li>
                        <a href="index.php?id=2e#ex1">Subitem 2e</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item 3</a>
            </li>
            <li>
                <a href="#">Item 4</a>
            </li>
            <li>
                <a href="#">Item 5</a>
                <ul>
                    <li>
                        <a href="index.php?id=5a#ex1">Subitem 5a</a>
                    </li>
                    <li>
                        <a href="index.php?id=5b#ex1">Subitem 5b</a>
                    </li>
                    <li>
                        <a href="index.php?id=5c#ex1">Subitem 5c</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item 6</a>
            </li>
            <li>
                <a href="#">Item 7</a>
                <ul>
                    <li>
                        <a href="index.php?id=7a#ex1">Subitem 7a</a>
                    </li>
                    <li>
                        <a href="index.php?id=7b#ex1">Subitem 7b</a>
                    </li>
                    <li>
                        <a href="index.php?id=7c#ex1">Subitem 7c</a>
                    </li>
                    <li>
                        <a href="index.php?id=7d#ex1">Subitem 7d</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item 8</a>
                <ul>
                    <li>
                        <a href="index.php?id=8a#ex1">Subitem 8a</a>
                    </li>
                    <li>
                        <a href="index.php?id=8b#ex1">Subitem 8b</a>
                    </li>
                    <li>
                        <a href="index.php?id=8c#ex1">Subitem 8c</a>
                    </li>
                    <li>
                        <a href="index.php?id=8d#ex1">Subitem 8d</a>
                    </li>
                    <li>
                        <a href="index.php?id=8e#ex1">Subitem 8e</a>
                    </li>
                    <li>
                        <a href="index.php?id=8f#ex1">Subitem 8f</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">Item 9</a>
                <ul>
                    <li>
                        <a href="index.php?id=9a#ex1">Subitem 9a</a>
                    </li>
                    <li>
                        <a href="index.php?id=9b#ex1">Subitem 9b</a>
                    </li>
                    <li>
                        <a href="index.php?id=9c#ex1">Subitem 9c</a>
                    </li>
                    <li>
                        <a href="index.php?id=9d#ex1">Subitem 9d</a>
                    </li>
                    <li>
                        <a href="index.php?id=9e#ex1">Subitem 9e</a>
                    </li>
                </ul>
            </li>
        </ul>
       
    </div>
</body>
</html>
